<template>
    <!-- 居中容器 -->
    <!-- <div role="tabpanel" class="tab-pane fade"> -->
    <div class="container">
        <div class="head-center">
            <div class="input-group">
                <span class="input-group-btn">
                </span>
            </div>
        </div>
        <div class="page-header">
            <h1>我的订单 <small>你下单的宝贝都在这里哦!</small></h1>
        </div>
        <ul v-if="orders.length > 0" class="list-group">
            <li class="list-group-item" v-for="(order,index) in orders" :key="order.id" @click="detail(index,order.id)">
                <div>
                    <div>
                        <h3>订单号: {{order.id}}</h3>
                        <h4>总价: {{order.totalPrice}}.00￥</h4>
                        <h4>订单提交时间: {{order.purchaseTime|formatDate}}</h4>
                    </div>
                </div>
            </li>
        </ul>
        <div v-else style="text-align: center;">
            <img src="../assets/svg/undraw_page_not_found_re_e9o6.svg" height="300">
            <h2 style="margin: 50px auto 100px auto;">您未存在购买记录</h2>
        </div>
    </div>
    <!-- </div> Purchase Tab End -->
</template>

<script>
import axios from "axios"
import { formatDate } from '../common/date'
export default {
    name:'order',
    data(){
        return{

        }
    },
    computed:{
        orders:{
            get: function () {
                return this.$store.state.orders.reverse()
            },
            set: function (val) {
                this.$store.commit('updateOrders', val)
            }
        }
    },
    methods:{
        post:function(url,data){
            if(this.orders.id<=0){
                alert("请先登录！")
                return
            }
            this.$axios.post(
                '/order/' + url,
                this.$qs.stringify(data)
            ).then((res) => {
                console.log('/order/' + url + ' 获取成功...')
                console.log(res.data)
                this.orders = res.data
            }).catch(function (error) {
                console.log('/order/query 获取失败...')
                console.log(error)
            })
        },
        detail(index,id){
            console.log('index,id :>> ', index,id);
            this.$store.state.order_id=id;
            this.$store.state.order_index=index;
            this.$router.push({name:'orderDetail'})
            // alert(id)
        }
    },
    filters:{
        formatDate(time){
            var date = new Date(time);
            return formatDate(date,'yyyy年MM月dd日 hh:mm:ss');
        }
    },
    //调用方法时间戳进行更改
      beforeMount() {
        console.log('OrderPage beforeMount...')
        let user = this.$store.state.user
        if (user == null) return
        this.$axios.post(
            '/order/query',
            // '/order/query?userId=1',
            this.$qs.stringify({ userId: user.id })
        ).then((res) => {
            console.log('获取成功...')
            console.log(res.data)
            this.orders = res.data
        }).catch(function (error) {
            console.log('url :>> ', user.id);
            console.log('获取失败...')
            console.log(error)
        })
    },
}
</script>

<style>

</style>
